<template>
    <div class="phaseData_header">
        <span class="phaseData_header_title"><h3>相位数据</h3></span>
        <span class="phaseData_header_buttons">
            <span
                class="phaseData_header_button"
                :class="{ active: activeButton === 'A相' }"
                @click="setActiveButton('A相')"
            >A相</span>
            <span
                class="phaseData_header_button"
                :class="{ active: activeButton === 'B相' }"
                @click="setActiveButton('B相')"
            >B相</span>
            <span
                class="phaseData_header_button"
                :class="{ active: activeButton === 'C相' }"
                @click="setActiveButton('C相')"
            >C相</span>
        </span>
    </div>
    <div class="phaseData_content">
        <div class="phaseData_content_item">
            <p>电压</p>
            <h3>150V/232.9V/250V</h3>
            <div>
                <el-progress :percentage="50" />
            </div>
        </div>
        <div class="phaseData_content_item">
            <p>电流</p>
            <h3>0A/1A</h3>
            <div>
                <el-progress :percentage="0" />
            </div>
        </div>
        <div class="phaseData_content_item">
            <p>功率</p>
            <h3>0瓦/1000瓦</h3>
            <div>
                <el-progress :percentage="0" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'

const activeButton = ref('A相')
const setActiveButton = (button): void => {
    activeButton.value = button
}
</script>

<style scoped>
.phaseData_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
}
.phaseData_header_button {
    cursor: pointer;
    padding: 10px;
    //margin: 0 5px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}
.phaseData_header_button.active {
    background-color: blue;
    color: white;
}
.phaseData_content{
    display: flex;
    justify-content: space-around;
}
.phaseData_content_item {
    flex: 1;
    height: 130px;
}
.phaseData_content_item div{
    margin-top: 10px;
}

</style>